<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <link rel="stylesheet" type="text/css" href="../public/iview/dist/styles/iview.css">
    <script type="text/javascript" src="../public/vue/dist/vue.js"></script>
    <script type="text/javascript" src="../public/iview/dist/iview.min.js"></script>
</head>

<body>
    <div id="app">

        <i-table :columns="columns1" :data="data1"></i-table>
        <Page :total="100"
        @on-change="changepage"
        :current="pageNum"
         show-total />
        <i-button @click="show">Click me!</i-button>
        <Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
    </div>
    <script>


        let testData = {

            "histories": [
                {
                    "username": "实例一",
                },
                {
                    "username": "实例二",
                },
                {
                    "username": "实例三",
                },
                {
                    "username": "实例四",
                }
            ]
        };



        new Vue({
            el: '#app',
            data () {
            return {

                pageNum: 1,
                dataCount:4,
                pageSize: 10,
                visible: false,
                columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
        },
            methods: {
                show() {
                    this.visible = true;
                },

                // 获取历史记录信息
                handleListApproveHistory() {

                    // 保存取到的所有数据
                    this.ajaxHistoryData = testData.histories;
                    this.dataCount = testData.histories.length;

                    // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
                    if (testData.histories.length < this.pageSize) {
                        this.historyData = this.ajaxHistoryData;
                    } else {
                        this.historyData = this.ajaxHistoryData.slice(0, this.pageSize);
                    }
                },
                changepage(index) {
                    // 当前页码
                    this.page = index;
                    console.log(index)
                    // let _start = (index - 1) * this.pageSize;
                    // let _end = index * this.pageSize;
                    // this.historyData = this.ajaxHistoryData.slice(_start, _end);
                },
                pagesize(index) {
                    let _start = (this.page - 1) * index;
                    let _end = this.page * index;
                    this.historyData = this.ajaxHistoryData.slice(_start, _end);
                    // 当前展示条数
                    this.pageSize = index;
                }

            },
            mounted() {
                // this.handleListApproveHistory();

                // this.historyData = testData.histories;
                // this.dataCount = 4;
            },
        })
    </script>
</body>

</html>